<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
    <script>
        var Ajax = {
            get: function(url,callback){
                // XMLHttpRequest对象用于在后台与服务器交换数据
                var xhr=new XMLHttpRequest();
                xhr.open('GET',url,false);
                xhr.onreadystatechange=function(){
                    // readyState == 4说明请求已完成
                    if(xhr.readyState==4){
                        if(xhr.status==200 || xhr.status==304){
                            console.log(xhr.responseText);
                            callback(xhr.responseText);
                        }
                    }
                }
                xhr.send();
            },

            // data应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
            post: function(url,data,callback){
                var xhr=new XMLHttpRequest();
                xhr.open('POST',url,false);
                // 添加http头，发送信息至服务器时内容编码类型
                xhr.setRequestHeader('Content-Type','application/json;utf-8');
                xhr.onreadystatechange=function(){
                    if (xhr.readyState==4){
                        if (xhr.status==200 || xhr.status==304){
                            // console.log(xhr.responseText);
                            callback(xhr.responseText);
                        }
                    }
                }
                xhr.send(data);
            }
        }


        var userList = new Array();
        userList.push({username:"zhangsan",age:18});
        userList.push({username:"lisi",age:28});

        Ajax.post(
            "${pageContext.request.contextPath}/user/req4",
            JSON.stringify(userList),
            fn
        )
        function fn(data) {
            console.log(data)
        }
    </script>
</head>
<body>
    <form action="${pageContext.request.contextPath}/user/req3" method="post">
        <input type="text" name="userList[0].username"><br/>
        <input type="text" name="userList[0].age"><br/>
        <input type="text" name="userList[1].username"><br/>
        <input type="text" name="userList[1].age"><br/>

        <input type="submit" value="提交">
    </form>
</body>
</html>
